<template>
  <!-- 虫情预警 -->
  <baseslot>
    <template v-slot:content>
      <div class="insect-alert-main">
        <div class="zh-myside">
          <myside @peststation="getinsectdevicemessage" />
        </div>
        <div class="alert-main-right">
          <div class="main-right-table">
            <el-table highlight-current-row :data="tableData" stripe border height="88%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="insectNameByToday" label="虫子">
                <template slot-scope="scope">
                  {{ scope.row.insectNameByToday || scope.row.insectNameByYesterday || scope.row.insectNameByMonth }}
                </template>
              </el-table-column>
              <el-table-column prop="insectNumByToday" label="今日" />
              <el-table-column prop="insectNumByYesterday" label="昨日" />
              <el-table-column prop="insectNumByMonth" label="今月" />
              <el-table-column prop="alarmLevelByToday" label="风险等级" />
              <el-table-column prop="disposalByToday" label="建议处理方法" />
            </el-table>
          </div>
          <div class="main-right-echartone">
            <div class="echartone-pie">
              <div>虫害比例情况（近15天)</div>
              <piechart :cdata="pestbiliPie" :nowwidth="'360px'" :nowheight="'200px'" />
            </div>
            <div class="echartone-line">
              <div>虫害近期变化趋势</div>
              <div>
                <linechart :cdata="pestLineChart" :nowwidth="'100%'" :nowheight="'200px'" />
              </div>
            </div>
          </div>
          <div class="main-right-echarttwo">
            <div class="echartone-pie">
              <div style="height:30px;">各大棚虫害总数比例（近30天）</div>
              <piechart :cdata="pestbiliPietwo" :nowwidth="'360px'" :nowheight="'200px'" />
            </div>
            <div class="echartone-line">
              <div>虫害近期变化趋势</div>
              <div>
                <linechart :cdata="pestLineCharttwo" :nowwidth="'100%'" :nowheight="'200px'" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </baseslot>
</template>
<script>
import levelreq from "@/api/basic-info-manage/new-pest-manage/index";
import nowpagereq from "@/api/digital-production/pest-management/insect-alert";
import piechart from "@/components/Echarts/components/piechart/chart.vue";
import linechart from "@/components/Echarts/components/linechart/chart.vue";
import baseslot from "@/components/BaseMainSlot/baseone.vue";
import myside from "../components/side.vue";
import { mymixin } from "@/utils/mixins";
import * as echarts from "echarts";

import { getToken } from "@/utils/auth";
export default {
  name: "InsectAlert",
  components: {
    baseslot,
    myside,
    piechart,
    linechart
  },
  mixins: [mymixin],
  data() {
    return {
      insectDeviceId: "",
      // 虫害信息表格
      tableData: [
        {
          insectName: "金龟子",
          insectNum1: "0",
          insectNum2: "0",
          alarmLevel: "",
          disposal: "",
          insectNum3: "0"
        },
        {
          insectName: "飞蛾",
          insectNum1: "0",
          insectNum2: "0",
          alarmLevel: "",
          disposal: "",
          insectNum3: "0"
        }
      ],
      pageSize: 10,
      // 当月任务情况分析
      // 虫害比例情况饼图15天
      pestbiliPie: [
        {
          name: "虫害种类",
          type: "pie",
          selectedMode: "single",
          radius: ["50%", "70%"],
          clockwise: false,
          label: {
            normal: {
              position: "outside",
              color: "#fff",
              formatter: "{b}\n{c}只({d}%)"
            }
          },
          data: [
            { value: 65, name: "使用" },
            { value: 15, name: "未使用" }
          ]
        }
      ],
      // 虫害比例情况饼图30天
      pestbiliPietwo: [
        {
          name: "虫害种类",
          type: "pie",
          selectedMode: "single",
          radius: ["50%", "70%"],
          clockwise: false,
          label: {
            normal: {
              color: "#fff",
              position: "outside",
              formatter: "{b}\n{c}只({d}%)"
            }
          },
          data: [
            { value: 65, name: "使用" },
            { value: 15, name: "未使用" }
          ]
        }
      ],
      // 折线图 -15tian
      pestLineChart: {
        xAxisdata: [],
        xData: ["虫虫(只)"],
        seriesData: [
          {
            name: "虫虫(只)",
            type: "line",
            data: [],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          }
        ]
      },
      // 折线图 --30天
      pestLineCharttwo: {
        xAxisdata: [],
        xData: ["虫虫(只)"],
        seriesData: [
          {
            name: "虫虫(只)",
            type: "line",
            data: [],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    // 获取虫报站信息
    getinsectdevicemessage(message) {
      this.tableData = [
        // { insectName: '金龟子',
        //   insectNum1: "0",
        //   insectNum2: "0",
        //   insectNum3: "0" },
        // { insectName: '飞蛾',
        //   insectNum1: "0",
        //   insectNum2: "0",
        //   insectNum3: "0" }
      ];
      // this.addblankmet();
      // this.tableData = this.tableData.filter(el=> el.insectName) 
      this.insectDeviceId = message?.insectDeviceId;
      this.getAllPestList(message)
      // console.log(message); return
      // this.nowdayPestsNumber(message?.insectDeviceId);
      // this.nowmonthPestsNumber(message?.insectDeviceId);
      // 饼图
      this.getshiwudaypie(message?.insectDeviceId);
      this.getsanshidaypietwo(message?.insectDeviceId);
      // 折线图
      this.getshiwudayline(message?.insectDeviceId);
      this.getshiwudaylinetwo(message?.insectDeviceId);
    },
    // 获取表格信息
    // 获取今日
    // async nowdayPestsNumber(id) {
    //   let param = {
    //     insectDeviceId: id,
    //     endTime: "2021-09-15 23:59:59",
    //     startTime: "2021-09-15 00:00:01"
    //   };
    //   let date = this.dateToFormattwo(new Date());
    //   param.startTime = `${date} 00:00:01`;
    //   param.endTime = `${date} 23:59:59`;
    //   await nowpagereq.queryPestsNumber(param).then(res => {
    //     if (res.data === []) {
    //     } else {
    //       let data = res.data;
    //       console.log(data,'data');
    //       data.forEach(item => {
    //         if (this.tableData.length > 0) {
    //           this.tableData.forEach((itemtwo, indextwo) => {
    //             // if (item.insectName === itemtwo.insectName) {
    //               this.tableData[indextwo].insectNum1 = item.insectNum;
    //               this.setlevelmet(item, indextwo);
    //             // }
    //           });
    //         }
    //       });
    //     }
    //   });
    // },
    // 获取今日的告警等级
    // setlevelmet(e, i) {
    //   let param = {
    //     pestName: e.insectName,
    //     pestNum: e.insectNum,
    //     organizationNo: getToken("organizationNo")
    //   };
    //   levelreq.getnowalarmpest(param).then(res => {
    //     let levmes = res.data;
    //     console.log(levmes);
    //     this.tableData[i].alarmLevel = levmes.alarmLevel;
    //     if (levmes.disposal) {
    //       this.tableData[i].disposal = levmes.disposal;
    //     } else {
    //       this.tableData[i].disposal = "";
    //     }
    //   });
    //   // this.tableData[indextwo].
    // },
    // 获取昨日
    // async olddayPestsNumber(id) {
    //   let param = {
    //     insectDeviceId: id,
    //     endTime: "",
    //     startTime: ""
    //   };
    //   let date = this.dateToFormattwo(new Date() - 24 * 60 * 60 * 1000);
    //   param.startTime = `${date} 00:00:01`;
    //   param.endTime = `${date} 23:59:59`;
    //   await nowpagereq.queryPestsNumber(param).then(res => {
    //     if (res.data === []) {
    //       // this.tableData[0].insectNum2 = "0"
    //       // this.tableData[1].insectNum2 = "0"
    //     } else {
    //       let data = res.data;
    //       data.forEach(item => {
    //         if (this.tableData.length > 0) {
    //           this.tableData.forEach((itemtwo, indextwo) => {
    //             if (item.insectName === itemtwo.insectName) {
    //               this.tableData[indextwo].insectNum2 = item.insectNum;
    //             }
    //           });
    //         }
    //         // if (item.insectName === '金龟子') {
    //         //   this.tableData[0].insectNum2 = item.insectNum
    //         // }
    //         // if (item.insectName === '飞蛾') {
    //         //   this.tableData[1].insectNum2 = item.insectNum
    //         // }
    //       });
    //     }
    //   });
    //   this.nowdayPestsNumber(id);
    // },
    // // 获取本月
    // async nowmonthPestsNumber(id) {
    //   let param = {
    //     insectDeviceId: id,
    //     endTime: "",
    //     startTime: ""
    //   };
    //   let date = this.dateToFormatthree(new Date());
    //   param.startTime = `${date}-01 00:00:01`;
    //   param.endTime = `${date}-30 23:59:59`;
    //   await nowpagereq.queryPestsNumber(param).then(res => {
    //     if (res.data === []) {
    //       // this.tableData = [
    //       //   { insectName: '金龟子',
    //       //     insectNum1: "0",
    //       //     insectNum2: "0",
    //       //     insectNum3: "0" },
    //       //   {
    //       //     insectName: '飞蛾',
    //       //     insectNum1: "0",
    //       //     insectNum2: "0",
    //       //     insectNum3: "0" }
    //       // ]
    //       // this.$set(this.tableData[0], "insectNum3", 0)
    //       // this.$set(this.tableData[1], "insectNum3", 0)
    //       this.tableData[0].insectNum3 = 0;
    //       this.tableData[1].insectNum3 = 0;
    //     } else {
    //       let data = res.data;
    //       data.forEach(item => {
    //         this.tableData.push({
    //           insectName: item.insectName,
    //           insectNum1: "0",
    //           insectNum2: "0",
    //           alarmLevel: "",
    //           disposal: "",
    //           insectNum3: item.insectNum
    //         });
    //         // if (item.insectName === '金龟子') {
    //         //   this.tableData[0].insectNum3 = item.insectNum
    //         // }
    //         // if (item.insectName === '飞蛾') {
    //         //   this.tableData[1].insectNum3 = item.insectNum
    //         // }
    //       });
    //     }
    //   });
    //   this.olddayPestsNumber(id);
    // },
    // 虫害比例近十五天--饼图
    getshiwudaypie(id) {
      let param = {
        insectDeviceId: id,
        endTime: "",
        startTime: ""
      };
      let date1 = this.dateToFormattwo(new Date() - 24 * 60 * 60 * 1000 * 15);
      let date2 = this.dateToFormattwo(new Date());
      param.startTime = `${date1} 00:00:01`;
      param.endTime = `${date2} 23:59:59`;
      nowpagereq.getpieChart(param).then(res => {
        let data = res.data;
        let newlist = [];
        data.forEach(item => {
          newlist.push({
            name: item.insectName,
            value: item.insectNum
          });
        });
        this.pestbiliPie[0].data = newlist;
      });
    },
    // 虫害比例近十五天--折线图
    getshiwudayline(id) {
      let param = {
        insectDeviceId: id,
        endTime: "",
        startTime: ""
      };
      let date1 = this.dateToFormattwo(new Date() - 24 * 60 * 60 * 1000 * 15);
      let date2 = this.dateToFormattwo(new Date());
      param.startTime = `${date1} 00:00:01`;
      param.endTime = `${date2} 23:59:59`;
      nowpagereq.getlineChart(param).then(res => {
        let data = res.data;
        let xAxisdata = [];
        let seriesData = [];
        data.forEach((item, index) => {
          let newlisttwo = {
            name: item.insectName,
            type: "line",
            data: [],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          };
          item.insectCollectionResults.forEach(itemtwo => {
            newlisttwo.data.push(itemtwo.insectNum);
            if (index === 0) {
              xAxisdata.push(itemtwo.collectionTime.substring(5, 16));
            }
          });
          seriesData.push(newlisttwo);
        });
        this.pestLineChart.xAxisdata = xAxisdata;
        this.pestLineChart.seriesData = seriesData;
      });
    },
    // 虫害比例近三十天--饼图
    getsanshidaypietwo(id) {
      let param = {
        insectDeviceId: id,
        endTime: "",
        startTime: ""
      };
      let date1 = this.dateToFormattwo(new Date() - 24 * 60 * 60 * 1000 * 30);
      let date2 = this.dateToFormattwo(new Date());
      param.startTime = `${date1} 00:00:01`;
      param.endTime = `${date2} 23:59:59`;
      nowpagereq.getpieChart(param).then(res => {
        let data = res.data;
        let newlist = [];
        data.forEach(item => {
          newlist.push({
            name: item.insectName,
            value: item.insectNum
          });
        });
        this.pestbiliPietwo[0].data = newlist;
      });
    },
    // 虫害比例近十五天--折线图
    getshiwudaylinetwo(id) {
      let param = {
        insectDeviceId: id,
        endTime: "",
        startTime: ""
      };
      let date1 = this.dateToFormattwo(new Date() - 24 * 60 * 60 * 1000 * 30);
      let date2 = this.dateToFormattwo(new Date());
      param.startTime = `${date1} 00:00:01`;
      param.endTime = `${date2} 23:59:59`;
      nowpagereq.getlineChart(param).then(res => {
        let data = res.data;
        let xAxisdata = [];
        let seriesData = [];
        data.forEach((item, index) => {
          let newlisttwo = {
            name: item.insectName,
            type: "line",
            data: [],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          };
          item.insectCollectionResults.forEach(itemtwo => {
            newlisttwo.data.push(itemtwo.insectNum);
            if (index === 0) {
              xAxisdata.push(itemtwo.collectionTime.substring(5, 16));
            }
          });
          seriesData.push(newlisttwo);
        });
        this.pestLineCharttwo.xAxisdata = xAxisdata;
        this.pestLineCharttwo.seriesData = seriesData;
      });
    },
    //TODO: 新接口
    async getAllPestList(item) {
      let params = {
        insectDeviceId: item.insectDeviceId
      }
      let res = await levelreq.queyAllPestInfoList(params)
      this.tableData = res.data
      // this.addblankmet();
    }
  }
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-table__body{
//   height:auto !important;
// }
::v-deep {
  .zhcontent {
    overflow: hidden !important;
  }
}
.insect-alert-main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .zh-myside {
    width: 230px;
    height: calc(100% - 0px);
    // overflow: auto;
    background-color: rgba(0, 72, 90, 0.7);
  }
  .alert-main-right {
    width: calc(100% - 240px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .main-right-table {
      width: 100%;
      height: 30%;
      border-bottom: dashed #4fa0b8 1px;
    }
    .main-right-echartone {
      width: 100%;
      // height: 33%;
      // min-height: 230px;
      height: calc((70% - 10px) / 2);
      margin-top: 5px;
      overflow: hidden;
      overflow-y: auto;
      // background-color: rgba(0,110,154,.1);
      background-color: rgba(0, 72, 90, 0.7);

      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
      .echartone-pie {
        // height: 200px;
        height: 100%;
        width: 360px;
      }
      .echartone-line {
        width: calc(100% - 360px);
        // height: 200px;
        // min-height: 170px;
        height: 100%;
        align-items: center;
      }
    }
    .main-right-echarttwo {
      width: 100%;
      // height: 33%;
      // min-height: 230px;
      height: calc((70% - 10px) / 2);
      overflow: hidden;
      overflow-y: auto;
      margin-top: 5px;
      // background-color: rgba(0,110,154,.1);
      background-color: rgba(0, 72, 90, 0.7);

      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
      .echartone-pie {
        // height: 200px;
        height: 100%;
        width: 360px;
      }
      .echartone-line {
        // width: calc(100% - 240px);
        width: calc(100% - 360px);
        // height: 200px;
        // min-height: 170px;
        height: 100%;
        align-items: center;
      }
    }
  }
}
</style>
